<template>
	<view class="content">
		<header>
		</header>
		<div class="info" @click="goToPage('/pages/wallet/index')">
			<p class="info_name"><span>火钻</span></p>
			<p class="info_text">2100</p>
		</div>
		
		<div class="iconCon">
			<div>
				<i class="iconfont icon-xiezuo icon_comment"></i>
				<p @click="goToPage('/pages/user/recharge')">充值</p>
			</div>
			<div>
				<i class="iconfont icon-tupian icon_comment"></i>
				<p >提现</p>
			</div>
		</div>
		
		<div class="ui-table">
			<view class="cu-list menu-avatar" :class="menuArrow?'arrow':''">
				<view class="cu-item">
					<view class="content">
						<navigator hover-class="none" url="../task/detail">
						<view class="text-grey">火源兑换</view>
						</navigator>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								2020-04-20
							</view> </view>
					</view>
					<view class="action">
						<view class="text-red text-xs">+0.02</view>
					</view>
				</view>
				
				<view class="cu-item">
					<view class="content">
						<navigator hover-class="none" url="../task/detail">
						<view class="text-grey">充值</view>
						</navigator>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								2020-04-20
							</view> </view>
					</view>
					<view class="action">
						<view class="text-red text-xs">+0.02</view>
					</view>
				</view>
				
				<view class="cu-item">
					<view class="content">
						<navigator hover-class="none" url="../task/detail">
						<view class="text-grey">提现</view>
						</navigator>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								2020-04-20
							</view> </view>
					</view>
					<view class="action">
						<view class="text-red text-xs">-0.02</view>
					</view>
				</view>
			</view>
		</div>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style>
	
	@import '../../../static/css/font_me.css';
	.cu-list.menu-avatar>.cu-item .content {
	    left: 10px !important;
	}
	
	*{
		margin: 0;
		padding: 0;
		font-family: "微软雅黑";
	}
	header{
		/* 头部包含背景图 */
		background-color: #f06c7a;
		width: 100%;
		overflow: hidden;
		
		height: 120px;
	}
	header>p{
		/* 放我的和关机图标 */
		height: 50px;
		line-height: 50px;
	}
	header>p>span:nth-of-type(1){
		display: inline-block;
		float: left;
		padding-left: 16px;
		font-size: 18px;
		font-weight: bold;
	}
	header>p>span:nth-of-type(2){
		display: inline-block;
		float: right;
		padding-right: 16px;
	}
	header>p>span:nth-of-type(2)>i{
		font-size: 18px;
		font-weight: bold;
	}
	
	
	.info{
		/* 存放个人信息的 */
		width: calc( 100% - 32px );
		background-color: #FFFFFF;
		margin-bottom: 20px;
		margin-left: 16px;
		height: 80px;
		margin-top: -48px;
		float: left;
		border-radius: 8px;
		box-shadow: 0 0 6px rgba(240,108,122,0.6);
	}
	.info>img{
		width: 66px;
		height: 66px;
		border-radius: 66px;
		margin: 0 auto;
		display: block;
		margin-top: -33px;
		border: 1px solid #ffda19;
	}
	.info_name{
		text-align: center;
		font-size: 16px;
		color: #444444;
		height: 30px;
		line-height: 30px;
		padding-top: 10px;
	}
	.info_text{
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #6F6F6F;
	}
	.info_item{
		width: calc( 100% / 2 );
		float: left;
		text-align: center;
		padding: 4px 0;
	}
	.info_item>p:nth-of-type(1){
		font-size: 12px;
	}
	.info_item>p:nth-of-type(2){
		font-size: 14px;
		color: #6F6F6F;
	}
	.info_item:nth-of-type(1){
		border-radius: 0 0 0 8px;
	}
	.info_item:nth-last-of-type(1){
		border-radius: 0 0 8px 0;
	}
	
	.iconCon{
		/* 放功能的图标 */
		width: 100%;
		float: left;
		overflow: hidden;
		margin-top: 6px;
		padding: 12px 0;
	}
	.iconCon>div{
		float: left;
		width: calc( 100% / 2 );
		text-align: center;
		
	}
	
	.ui-table{
		float: left;
		width: calc( 100% - 64px );
		background-color: #FFFFFF;
		border-top: 8px solid #EFEFF4;
		padding: 0 30px;
	}
	
	.icon_comment{
		border-radius: 100px;
		font-size: 20px;
		width: 30px;
		height: 30px;
		display: inline-block;
		line-height: 30px;
		color: #FFFFFF;
	}
	
	.icon-xiezuo{
		background-color: #fbdc58;
	}
	.icon-tupian{
		background-color: #94ede2;
	}
	.icon-yinyue{
		background-color: #bceccd;
	}
	.icon-shipin{
		background-color: #ffbadc;
	}
</style>
